<template>
  <el-form size="small" ref="form" :model="form" :rules="rules" label-width="100px" label-position="right">
    <div>
      <el-form-item class="inline-block"  style="width:40%" label="货主名称" prop="goodsOwner">
        <el-select style="width:200px" v-model="form.goodsOwner" placeholder="货主名称">
          <el-option v-for="item in []" :label="item.label" :value="item.value" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="inline-block" label="生产企业">
        <el-input
          type="text"
          v-model="form.manufacturer"
          placeholder="生产企业"
          style="width:200px"
        />
      </el-form-item>
    </div>
    <div>
      <el-form-item  class="inline-block" label="生产地"  prop="address">
        <el-select style="width:200px" v-model="form.address" placeholder="生产地">
          <el-option v-for="item in []" :label="item.label" :value="item.value" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item  class="inline-block ml10" label="" label-width="0">
        <el-input
          type="text"
          v-model="form.detailedAddress"
          placeholder="详细地址"
          style="width:200px"
        />
      </el-form-item>
    </div>
    <div>
      <el-form-item  class="inline-block"  style="width:40%" label="货物名称"  prop="goodsName">
        <el-input
          type="text"
          v-model="form.goodsName"
          placeholder="货物名称"
          style="width:200px"
        />
      </el-form-item>
      <el-form-item class="inline-block" label="货物类型">
        <el-select style="width:200px" v-model="form.goodsType" placeholder="货物类型">
          <el-option v-for="item in []" :label="item.label" :value="item.value" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
    </div>
    <div>
      <el-form-item  class="inline-block"  style="width:40%" label="货号"  prop="articleNumber">
        <el-input
          type="text"
          v-model="form.articleNumber"
          placeholder="货号"
          style="width:200px"
        />
      </el-form-item>
      <el-form-item class="inline-block" style="width:40%" label="货物上市时间">
        <el-date-picker
          style="width:200px"
          v-model="form.listingTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="货物上市时间">
        </el-date-picker>
      </el-form-item>
    </div>
    <el-form-item label="物品描述" prop="desc">
      <el-input style="width:600px" type="textarea" v-model="form.desc"></el-input>
    </el-form-item>
    <div>
      <el-form-item class="inline-block" style="width:40%" label="货物数量">
        <el-input
          v-model="form.goodsCount"
          @input="limitInput($event, 'goodsCount')"
          placeholder="货物数量"
          style="width:200px"
        />件
      </el-form-item>
      <el-form-item class="inline-block" label="货物重量">
        <el-input
          v-model="form.goodsWeight"
          @input="limitInput_00($event, 'goodsWeight')"
          placeholder="货物重量"
          style="width:200px"
        />吨
      </el-form-item>
    </div>
    <div>
      <el-form-item class="inline-block" style="width:40%" label="货物体积">
        <el-input
          v-model="form.goodsVolume"
          @input="limitInput_00($event, 'goodsVolume')"
          placeholder="货物体积"
          style="width:200px"
        />立方
      </el-form-item>
      <el-form-item class="inline-block" label="包装">
        <el-select style="width:200px" v-model="form.package" placeholder="包装">
          <el-option v-for="item in []" :label="item.label" :value="item.value" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
    </div>
    <el-form-item label="货物附件">
      <UploadImage
        class="ml5"
        title="产品手册"
        :size="10"
      />
      <UploadImage
        class="ml5"
        title="质检报告"
        :size="10"
      />
    </el-form-item>
    <el-form-item label="其他材料">
      <UploadFile
        :data="{}"
        :size="10"
        :limit="5"
      >
      </UploadFile>
    </el-form-item>
    <el-form-item label="备注" prop="desc">
      <el-input style="width:600px" type="textarea" v-model="form.desc"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
import { validEmail } from "@/utils/validate"
import UploadImage from '@/components/UploadImage/uploadImage.vue';
import UploadFile from '@/components/UploadFile';
export default {
  name: "basic",
  components: {
    UploadImage,
    UploadFile,
  },
  props: {
    data: {
      type: Object,
      default: () => {}
    },
  },
  data() {
    return {
      form: this.data,
      rules: {
        goodsOwner: [
          { required: true, message: "货主姓名不能为空", trigger: "change" },
        ],
        goodsName: [
          { required: true, message: "货物名称不能为空", trigger: "blur" },
        ],
        iDCard: [
          { required: true, message: "身份证号不能为空", trigger: "blur" },
        ],
        customerNature: [
          { required: true, message: "客户性质不能为空", trigger: "change" },
        ],
        industry: [
          { required: true, message: "所属行业不能为空", trigger: "change" },
        ],
        postalCode: [{ required: false, message: "邮政编码不能为空", trigger: 'blur' }],
        businessAddress: [{ required: true, message: "所在地址不能为空", trigger: 'change' }],
        mailAddress: [{ required: true, message: "通讯地址不能为空", trigger: 'change' }],
        contacts: [{ required: true, message: "联系人不能为空", trigger: 'blur' }],
        post: [{ required: false, message: "职务不能为空", trigger: 'blur' }],
        email: [
          {
            validator:  (rule, value, callback) => {
              if (!value) {
                callback();
              } else if (!validEmail(value)) {
                callback(new Error('电子邮箱格式错误'));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        telephone: [
          { required: true, trigger: "blur", message: "联系电话不能为空" },
          {
            pattern: /^1[3-9]\d{9}$/, message: '联系电话格式错误', trigger: 'blur'
          }
        ],
        relatedAccessories: [
          { required: false, message: "相关附件不能为空", trigger: "change" },
        ],
      },
    };
  },
  created() {
  },
  methods: {
    async handleValidate() {
      return new Promise((resolve) => {
        this.$refs.form.validate(valid => {
          if (valid) {
            resolve(true)
          } else {
            resolve(false)
          }
        });
      })
    },
    limitInput(value,name) {
      this.form[name] = ('' + value) // 第一步：转成字符串
            .replace(/[^\d]/g, "") // 只能输入数字
            .replace(/^0+(\d)/, "$1"); // 第一位0开头，0后面为数字，则过滤掉，取后面的数字
    },
    // 小数点后2个0
    limitInput_00(value,name) {
      this.form[name] = ('' + value) // 第一步：转成字符串
        .replace(/^\./g, '')  //第一个字符不能是.
        .replace(/\.{2,}/g, '.') // 不能连续输入.
        .replace(/(\.\d+)\./g, '$1') // .后面不能再输入.
        .replace(/^0+(\d)/, '$1') // 第一位0开头，0后面为数字，则过滤掉，取后面的数字
        .replace(/(\d{15})\d*/, '$1') // 最多保留15位整数
        .replace(/(\.\d{2})\d*/, '$1')// 最多保留2位小数
    },
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
</style>
